import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import './index.less';
import {history} from 'umi';
import {
  BsHouseDoorFill,
  BsHouseDoor,
  BsBagFill,
  BsBag,
  BsPersonFill,
  BsPerson,
} from 'react-icons/bs';
export default class MenuBar extends Component<MenuBarProps> {
  constructor(props: MenuBarProps) {
    super(props);
  }

  state = {
    items: [
      {
        title: '首页',
        selectedIcon: <BsHouseDoorFill style={{ fontSize: '1.5rem' }} />,
        icon: <BsHouseDoor style={{ fontSize: '1.5rem' }} />,
        link: '/',
      },
      {
        title: '订单',
        selectedIcon: <BsBagFill style={{ fontSize: '1.5rem' }} />,
        icon: <BsBag style={{ fontSize: '1.5rem' }} />,
        link: '/order',
      },
      {
        title: '我的',
        selectedIcon: <BsPersonFill style={{ fontSize: '1.5rem' }} />,
        icon: <BsPerson style={{ fontSize: '1.5rem' }} />,
        link: '/user',
      },
    ],
  };

  render() {
    const { pathname } = this.props;

    return (
      <div className="menu-bar" >
        <TabBar>
          {this.state.items.map(item => (
            <TabBar.Item
              key={item.link}
              icon={item.icon}
              title={item.title}
              selectedIcon={item.selectedIcon}
              selected={pathname === item.link}
              onPress={() => history.push(item.link)}
            />
          ))}
        </TabBar>
      </div>
    );
  }
}
interface MenuBarProps {
  pathname: string;
}
